<template>
  <a-modal :visible="visible" title="设置列表列" @ok="handleOk" @cancel="cancel">
    <a-form :labelCol="{ span: 4 }" :wrapperCol="{ span: 16 }">
      <template v-for="(item, index) in searchList" :key="item">
        <a-row type="flex" justify="space-between" align="middle">
          <div style="margin: 20px 0">搜索条件{{ index + 1 }}：</div>
          <a-button type="danger" @click="del(index)">删除</a-button>
        </a-row>
        <a-row class="form-item">
          <div class="form-item_label">组件：</div>
          <a-col :span="16">
            <a-select placeholder="请选择组件" v-model:value="item.component">
              <a-select-option
                v-for="component in COMPONENT"
                :key="component.value"
                :value="component.value"
              >
                {{ component.label }}
              </a-select-option>
            </a-select>
          </a-col>
        </a-row>
        <a-row class="form-item" v-if="item.component !== 'datePicker'">
          <div class="form-item_label">字段：</div>
          <a-col :span="16">
            <a-input placeholder="请输入字段名称" v-model:value="item.field"></a-input>
          </a-col>
        </a-row>
        <div v-if="item.component === 'datePicker'">
          <a-row class="form-item">
            <div class="form-item_label">开始字段：</div>
            <a-col :span="16">
              <a-input placeholder="请输入字段名称" v-model:value="item.startField"></a-input>
            </a-col>
          </a-row>
          <a-row class="form-item">
            <div class="form-item_label">结束字段：</div>
            <a-col :span="16">
              <a-input placeholder="请输入字段名称" v-model:value="item.endField"></a-input>
            </a-col>
          </a-row>
          <a-row class="form-item">
            <div class="form-item_label">开始时间占位文本：</div>
            <a-col :span="16">
              <a-input placeholder="请输入字段名称" v-model:value="item.startPlaceholder"></a-input>
            </a-col>
          </a-row>
          <a-row class="form-item">
            <div class="form-item_label">结束时间占位文本：</div>
            <a-col :span="16">
              <a-input placeholder="请输入字段名称" v-model:value="item.endPlaceholder"></a-input>
            </a-col>
          </a-row>
        </div>
        <a-row class="form-item" v-if="item.component !== 'datePicker'">
          <div class="form-item_label">占位文本：</div>
          <a-col :span="16">
            <a-input placeholder="请输入提示文本" v-model:value="item.placeholder"></a-input>
          </a-col>
        </a-row>
        <div v-if="item.component === 'select'">
          <a-row class="form-item">
            <div class="form-item_label">搜索模式：</div>
            <a-col :span="16">
              <a-select placeholder="请输入搜索模式" v-model:value="item.mode">
                <a-select-option value="local">本地定义下拉列表</a-select-option>
                <a-select-option value="remote">远程搜索下拉列表</a-select-option>
              </a-select>
            </a-col>
          </a-row>
          <a-row class="form-item" v-if="item.mode === 'remote'">
            <div class="form-item_label">远程url：</div>
            <a-col :span="16">
              <a-input v-model:value="item.searchUrl"></a-input>
            </a-col>
          </a-row>
          <a-row class="form-item" v-if="item.mode === 'remote'">
            <div class="form-item_label">标签名字段：</div>
            <a-col :span="16">
              <a-input v-model:value="item.searchLabel"></a-input>
            </a-col>
          </a-row>
          <a-row class="form-item" v-if="item.mode === 'remote'">
            <div class="form-item_label">唯一标识：</div>
            <a-col :span="16">
              <a-input v-model:value="item.searchId"></a-input>
            </a-col>
          </a-row>
        </div>
      </template>
    </a-form>
    <a-button @click="add" type="primary">添加搜索条件</a-button>
  </a-modal>
</template>
<script>
import { defineComponent, reactive, toRaw, toRefs, watch } from 'vue';
import { COMPONENT } from '../utils/constant';
import { message } from 'ant-design-vue';
import _ from 'lodash-es';
export default defineComponent({
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    data: {
      type: Array,
      default: () => [],
    },
  },
  emits: ['update:data', 'update:visible'],
  setup(props, { emit }) {
    const { data } = toRefs(props);
    const state = reactive(
      { searchList: _.cloneDeep(data.value) },
      // searchList: [{method:'edit',url:'/api'}]
    );
    watch(
      () => state.searchList,
      key => {
        state.data = key.map(item => item.type);
      },
      { deep: true, immediate: true },
    );
    const changeBox = () => {
      state.searchList = state.data.map(item => {
        const handler = state.searchList.find(handler => item === handler.type) || {};
        return {
          type: item,
          url: '',
          ...handler,
        };
      });
    };

    const handleOk = () => {
      const valid = state.searchList.every(
        item => (item.field || (item.startField && item.endField)) && item.component,
      );
      if (!valid) {
        return message.error('定义字段或者组件不能为空');
      } else {
        emit('update:data', _.cloneDeep(toRaw(state.searchList)));
        emit('update:visible', false);
      }
    };
    const cancel = () => {
      emit('update:visible', false);
    };

    const add = () => {
      const list = state.searchList;
      list[list.length] = {
        component: undefined,
        field: '',
        startField: '',
        endField: '',
        placeholder: '',
        mode: undefined, // 本地或者api
      };
    };

    const del = index => {
      state.searchList.splice(index, 1);
      state.searchList = [...state.searchList];
    };

    return {
      del,
      COMPONENT,
      ...toRefs(state),
      cancel,
      handleOk,
      changeBox,
      add,
    };
  },
});
</script>
<style lang="less" scoped>
.required {
  position: relative;
  &::after {
    position: absolute;
    top: 0;
    left: 10px;
    color: red;
    content: '*';
  }
}
.form-item {
  margin: 20px;
  &_label {
    display: flex;
    justify-content: flex-end;
    width: 70px;
    margin-right: 10px;
  }
}
</style>
